
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>

<html>
<head>
    <title>学生列表</title>
    <script src="js/jquery-3.6.3.min.js"></script>
    <style>
        .box{
            pointer-events: none;
            color: lightgrey;
        }
    </style>
</head>
<body>
<p>
    <a href="addstudent.jsp">增加学生</a>
    <%--href 属性指定了链接目标页面的 URL 地址--%>
</p>

<p>
    <form action="student.do" method="get" id="searchForm">
    <input type="hidden" name="pageNo" value="1"/>
    <input type="search" placeholder="姓名" name="sname" value="${sname}"/>
    <input type="search" placeholder="电话" name="tel" value="${tel}"/>
    入学时间从<input type="date" placeholder="yyyy-MM-dd" name="dateStart" value="<fmt:formatDate value='${start}' pattern='yyyy-MM-dd'/>"/>
    -<input type="date" placeholder="yyyy-MM-dd" name="dateEnd" value="<fmt:formatDate value='${end}' pattern='yyyy-MM-dd'/>"/>
    <input type="submit" value="搜索"/>
</form>
</p>
<table border="1" cellpadding="0" cellspacing="0">

    <tr>
        <th>学号</th>
        <th>姓名</th>
        <th>QQ</th>
        <th>Wechat</th>
        <th>手机</th>
        <th>性别</th>
        <th>入学时间</th>
        <th>操作</th>
    </tr>
    <c:forEach items="${p.datas}" var="stu">
    <tr>
        <td>${stu.stuno}</td>
        <td>${stu.sname}</td>
        <td>${stu.QQ}</td>
        <td>${stu.wechat}</td>
        <td>${stu.telephone}</td>
        <td>${stu.sex}</td>
        <td><fmt:formatDate value="${stu.enterdate}" pattern="yyyy-MM-dd"/></td>
        <td><a href="getStu.do?stuno=${stu.stuno}">修改</a>&nbsp;<a onclick="return confirm('真的要删除？')"
                                                                                 href="del.do?stuno=${stu.stuno}">删除</a>&nbsp;
            <a href="examresult.jsp?stuno=${stu.stuno}">查看成绩</a>
        </td>
    </tr>
    </c:forEach>
</table>
<div id="pager">

<a <c:if test="${p.pageNo<=1}">class="box"</c:if> href="#" data-page="1">第一页</a>

    <a <c:if test="${p.pageNo<=1}">class="box"</c:if> href="#" data-page="${p.pageNo-1}">上一页</a>
    <input type="number" value="${p.pageNo}" max="${p.pageTotal}" min="1" style="width: 40px"/>
    <button id="go" type="button">Go</button>
    <a href="#" <c:if test="${p.pageNo>=p.pageTotal}">class="box"</c:if> data-page="${p.pageNo+1}">下一页</a>
    <a href="#" data-page="${p.pageTotal}">最后一页</a>
    共有${p.count}人
</div>
<script>
    $(function () {
        $("#pager #go").click(function () {
            let p=$(this).prev().val();
            if(p<1)
                return;
            if(p>${p.pageTotal})
                return;

            $("#searchForm [name=pageNo]").val(p);
            $("#searchForm").submit();
            return false;
        });
        $("#pager a").click(function () {
            let p=$(this).attr("data-page");
            if(p<1)
                return;
            if(p>${p.pageTotal})
                return;

            $("#searchForm [name=pageNo]").val(p);
            $("#searchForm").submit();
            return false;
        });
    });
</script>
</body>
</html>
